Yes, transitions can be triggered by JavaScript. While CSS transitions usually respond to user interactions like :hover or :focus, you can also use JavaScript to change a property dynamically — when the property value changes, the transition runs automatically if defined in CSS.

You define the transition in your CSS, and then use JavaScript to modify the element’s style or class. When the property value changes, the browser applies the transition smoothly.

Example: Trigger Transition with JavaScript

When the user clicks the box, JavaScript toggles the expanded class, causing the width and background color to transition smoothly.

You can also apply transitions by changing inline styles directly with JavaScript. As long as the element has a transition defined, any property changes will animate smoothly.

Example: Inline Style Change

Here, the transform property is updated directly through JavaScript, and because a transition is set, it animates smoothly.

Best Practices

1
Define transitions in CSS for cleaner separation between style and logic.
2
Use JavaScript to trigger state changes by toggling classes or updating styles.
3
Transitions only occur when a property’s value actually changes.
4
JavaScript can control when, how, and under what conditions transitions happen.

Use JavaScript-triggered transitions when you need fine-grained control, such as animating elements after a delay, in response to user input, or after loading dynamic content.

Difficulty: 5/10

Topics: CSS transitions, JavaScript DOM manipulation, performance

Scenario Questions

0-2 years experience

1
How would you use JavaScript to start a CSS transition on a button when it's clicked?
2
If you add a class that defines a transition after the element is already rendered, what happens?
3
Will a transition run if you set the transition property via JavaScript after you already changed the element's style? Why or why not?

2-5 years experience

1
We have a modal that should fade in using a CSS transition, but the animation sometimes skips on slower devices. Walk me through how you'd trigger the transition with JavaScript and what you'd check to debug the issue.
2
You need to toggle a menu's height with a smooth transition, but the height is dynamic. How would you implement this using JS to trigger the transition, and what trade‑offs exist?
3
Why might a transition not fire when you add a class via JavaScript inside a requestAnimationFrame callback? Explain the timing considerations.

5-8 years experience

1
You're building a component library where every component can be animated via CSS transitions triggered by JS. How would you design the API to ensure consistent behavior, avoid layout thrashing, and keep the bundle size low?
2
In a large single‑page app, many elements are added and removed dynamically, each with entry/exit transitions. How would you manage JS‑triggered transitions to prevent memory leaks and ensure smooth performance?
3
Explain how you would coordinate JavaScript‑driven transitions with the prefers‑reduced‑motion media query across the whole application.

8+ years experience

1
Our legacy product mixes inline style changes with CSS transition classes, causing flicker and inconsistent animations. As a staff engineer, outline a migration plan to centralize transition handling, including how you'd phase out JS‑triggered transitions, enforce design‑system constraints, and measure performance impact.
2
When designing a cross‑team UI framework, how would you decide whether to expose transition control via JavaScript APIs versus pure CSS, considering accessibility, theming, and future platform changes?
3
Describe the architectural considerations for supporting server‑side rendering of components that rely on JS‑triggered CSS transitions, ensuring hydration does not cause unwanted animations.

Follow-up Questions

❓What would you do if the transition never fires?
❓How do you make sure the animation respects a user's reduced‑motion preference?
❓Are there any risks when triggering transitions inside a requestAnimationFrame loop?